<template>
  <section>
    <div class="pagination">
      <el-pagination
        :current-page="pagination.page"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </div>
  </section>
</template>

<script>
export default {
  name: 'PaginationXH',
  props: {
    total: {
      type: [Number, String],
      default: function() {
        return 1
      }
    },
    pagination: {
      type: Object,
      default: function() {
        return {
          page: 1,
          pageSize: 20
        }
      }
    }
  },

  data() {
    return {
    }
  },
  methods: {
    pageSizeChange(val) {
      this.pagination.pageSize = val

      this.pageChange()
    },
    pageCurrentChange(val) {
      this.pagination.page = val

      this.pageChange()
    },
    pageChange() {
      const { page, pageSize } = this.pagination
      this.$emit('page-change', page, pageSize)
    }
  }
}
</script>

<style scoped>
    .pagination {
        display: flex;
        justify-content:flex-end;
        margin-top: 20px;
    }
</style>
